<template>
	<view class="item" @click="toDetail">
		<view class="title">
			css文本溢出隐藏
		</view>
		<view class="content">
			<view class="left">
				<view class="sub-title">
					熊的猫 | 1月前
				</view>
				<view class="text">
					最近开发了一个功能，页面首先会加载大量的图片，初次进入页面时，会导致页面变卡顿最近开发了一个功能，页面首先会加载大量的图片，初次进入页面时，会导致页面变卡顿
				</view>
			</view>
			<view class="right" v-if="index % 2 == 0">
				<image class="pic" src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="bottom">
			<u-row justify="space-between">
				<u-col span="3">
					<u-icon name="thumb-up" size="20" label="111"></u-icon>
				</u-col>
				<u-col span="3">
					<u-icon name="chat" size="20" label="10"></u-icon>
				</u-col>
			</u-row>
			<u-icon name="more-dot-fill" size="16"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: "/pages/detail/detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 10rpx 40rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}



		.content {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.left {
				color: #333;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;

				.sub-title {
					color: #888;
					font-size: 28rpx;
					margin: 10rpx 0;
				}
			}

			.right {
				width: 600rpx;
				margin-left: 20rpx;

				.pic {
					width: 100%;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>